<template>
  <el-dialog
    :visible="previewVisible"
    :close-on-click-modal="false"
    :title="showScreen ? '预览大屏' : '参数值填写'"
    :before-close="closePreview"
    :fullscreen="true"
    width="500px"
    top="5%"
    :class="showScreen ? 'showScreen' : ''"
  >
    <div v-if="!showScreen">
      <el-form ref="form" :model="form" label-width="90px" :inline="true">
        <el-form-item v-for="(item, index) in form.paramList" :key="index">
          <el-row>
            <el-col :span="12">
              <el-form-item :label="`参数名称${index + 1}`">
                <el-input disabled v-model="item.param"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="参数值"
                :prop="'paramList.' + index + '.value'"
                :rules="rules.value"
              >
                <el-input
                  v-model="item.value"
                  placeholder="请输入"
                  @input="(val) => iptChange(val, index)"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
      <el-row style="text-align: right">
        <el-button type="primary" @click="goNext"> 下一步 </el-button>
      </el-row>
    </div>
    <iframe
      :src="url"
      frameborder="0"
      id="myIframe"
      v-else
      style="width: 100%; height: calc(100vh - 60px)"
      v-loading="loadingScreen"
      element-loading-text="拼命加载中"
    ></iframe>
  </el-dialog>
</template>

<script>
import { getSsoToken } from '@/apis/Common.js'
import { getRealToken } from '@/utils/util.js'
export default {
  data() {
    return {
      form: {
        paramList: []
      },
      showScreen: false,
      previewVisible: false,
      paramList: [],
      url: '',
      ssoToken: '',
      loadingScreen: false,
      rules: {
        value: [{ required: true, message: '请输入', trigger: 'blur' }]
      }
    }
  },
  mounted() {
    this.getToken()
  },
  watch: {
    showScreen: {
      handler(n, o) {
        if (n) {
          this.$nextTick(() => {
            var iframe = document.getElementById('myIframe')
            if (iframe.contentWindow) {
              iframe.contentWindow.location.reload(true)
            }
          })
        }
      }
    }
  },
  methods: {
    async getToken() {
      let res = await getSsoToken()
      if (res.code === 200) {
        this.ssoToken = res?.msg
      }
    },
    iptChange(val, index) {
      Object.assign(this.form.paramList[index], {
        value: val
      })
    },
    async show(url, paramList) {
      this.previewVisible = true
      this.loadingScreen = true
      this.url = ''
      let res = await getSsoToken()
      this.ssoToken = res?.msg

      this.form.paramList =
        paramList?.length > 0
          ? paramList.filter((ele) => {
              if (ele.value) {
                ele.value = ''
              }
              return ele.param?.length > 0
            })
          : []
      if (this.form.paramList?.length > 0) {
        this.showScreen = false
        this.url = url
      } else {
        this.showScreen = true
        let separator = url.includes('?') ? '&' : '?'
        this.url = `${url}${separator}ssoToken=${
          this.ssoToken
        }&token=${getRealToken().insightToken}&access_token=${getRealToken().insightToken}`
      }
      this.loadingScreen = false
      console.log(this.url)
    },

    goNext() {
      this.$refs.form.validate(async (valid) => {
        if (!valid) return
        this.showScreen = true
        this.loadingScreen = true
        let res = await getSsoToken()
        this.ssoToken = res?.msg
        let queryParams = this.form.paramList
          .map((ele) => `${ele.param}=${ele.value}`)
          .join('&')
        let separator = this.url.includes('?') ? '&' : '?'
        this.url = `${this.url}${separator}${queryParams}&ssoToken=${
          this.ssoToken
        }&token=${getRealToken().insightToken}&access_token=${getRealToken().insightToken}`
        this.loadingScreen = false
      })
    },
    closePreview() {
      this.previewVisible = false
      this.showScreen = !this.showScreen
      this.url = ''
    }
  }
}
</script>

<style lang="less" scoped>
::v-deep.showScreen {
  .el-dialog__body {
    padding: 0;
  }
}
</style>
